<template>
  <div>
    <a-row>
      <a-col :span="4">
        <a-input-search
          v-model:value="value"
          placeholder="input search text"
          enter-button
          @search="onSearch"
        />
      </a-col>
      <a-col :span="2">
        <a-button @click="add()">新增</a-button>
      </a-col>
    </a-row>

    <a-table :dataSource="dataSource" :columns="columns" :row-selection="rowSelection">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <span>
            <a @click="edit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm v-if="dataSource.length" title="确定要删除该条?" @confirm="onDelete(record.key)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </template>
      </template>
    </a-table>

    <a-drawer
      v-model:visible="visible"
      title="新增"
      width="520"
      :closable="false"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose"
    >
      <a-form :model="form" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="上级菜单" name="menus">
              <a-select
                v-model:value="form.menus"
                mode="tags"
                style="width: 100%"
                :options="options"
                @change="handleChange"
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="打开方式" name="mode">
              <a-radio-group v-model:value="form.mode">
                <a-radio :value="1">组件</a-radio>
                <a-radio :value="2">内链</a-radio>
                <a-radio :value="3">外链</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="菜单名称" name="name">
              <a-input v-model:value="form.name" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="目标" name="target">
              <a-radio-group v-model:value="form.target">
                <a-radio :value="1">当前页</a-radio>
                <a-radio :value="2">新标签</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="菜单图标" name="icons">
              <a-select
                v-model:value="form.icons"
                mode="tags"
                style="width: 100%"
                :options="options"
                @change="handleChange"
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序号" name="sort">
              <a-input v-model:value="form.sort" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="路由地址" name="address">
              <a-input v-model:value="form.address" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否可见" name="view">
              <a-switch v-model:checked="form.view" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="组件路径" name="path">
              <a-input v-model:value="form.path" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <template #footer>
        <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onSave">保存</a-button>
      </template>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref } from 'vue';
import type { Ref, UnwrapRef } from 'vue';
import { cloneDeep } from 'lodash-es';
import { useRouter} from 'vue-router';
import { json } from 'stream/consumers';
export default defineComponent({
  setup() {
    const handleChange = (value: string) => {
      console.log(`selected ${value}`);
    };
    const value = ref<string>("");
    const router = useRouter();
    const onSearch = (searchValue: string) => {
      console.log(searchValue, value.value);
    };
    const form = ref({
      menus:"",
      mode:"",
      name: '',
      target:"",
      icons:"",
      sort:"",
      address:"",
      view:"",
      path: '',
    });
    interface DataItem {
        key: string;
        name: string;
        path: number;
        menusID: string;
        updateTime:string;
        creatTime:string;
    }
    const columns = [
      {
        title: "名称",
        dataIndex: "name",
        key: "name"
      },
      {
        title: "路径",
        dataIndex: "path",
        key: "path"
      },
      {
        title: "组件ID",
        dataIndex: "menusID",
        key: "menusID"
      },
      {
        title: "更新时间",
        dataIndex: "updateTime",
        key: "updateTime"
      },
       {
        title: "创建时间",
        dataIndex: "creatTime",
        key: "creatTime"
      },
      {
        title: "操作",
        dataIndex: "operation"
      }
    ];
    const dataSource : Ref<DataItem[]> = ref([
      {
        key: "1",
        name: "页面1",
        path: "/index.html",
        menusID: "123",
        updateTime: "2022-7-28",
        creatTime: "2022-7-28",
        children: [
          {
            key: 11,
            name: "页面1",
            path: "/index/a.html",
            menusID: "123",
            updateTime: "2022-7-28",
            creatTime: "2022-7-28",
          }
        ]
      }
    ]);
    const count = computed(() => dataSource.value.length + 1);
    

    const onDelete = (key: string) => {
      dataSource.value = dataSource.value.filter(item => item.key !== key);
    };
    const edit = (record:any) => {
        form.value = record;
        visible.value = true;
    };
    const add = ()=>{
       visible.value = true;
       form.value = {};
    }
    const visible = ref<boolean>(false);
    const onClose = () => {
      visible.value = false;
    };
    const onSave = ()=>{
        dataSource.value.forEach((element,index) => {
           dataSource.value.push(form.value);
        });
        visible.value = false;
    }
    const rowSelection = ref({
      onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
        console.log(record, selected, selectedRows);
      },
      onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
        console.log(selected, selectedRows, changeRows);
      },
    });

    return {
      rowSelection,
      handleChange,
      options: [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) })),
      form,
      onSave,
      visible,
      onClose,
      value,
      onSearch,
      dataSource,
      columns,
      count,
      edit,
      onDelete,
      add
    };
  }
});
</script>

